// 注意这里没有导入 defineStroe 也能使用是使用插件自动导入过(也可以手动导入的)

interface Counter {
  count: number;
}

//! Options API 写法

// 写法一(推荐写法)
export const counterStore1 = defineStore("counter1", {
  // 函数返回一个对象类
  state: (): Counter => {
    return {
      count: 0
    };
  },
  getters: {
    // 获取数据
    getCount(): number {
      return this.count;
    }
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

// 写法二(相似vuex)
export const counterStore2 = defineStore({
  id: "counter2",
  state: (): Counter => ({
    count: 1
  }),
  // 获取数据
  getters: {
    getCount(): number {
      return this.count;
    }
  },
  actions: {
    increment() {
      this.count += 2;
    }
  }
});

//! Composition API setup 写法
export const counterStore3 = defineStore("counter3", () => {
  const count = ref(5);

  const doubleCount = computed(() => {
    return count.value * 2;
  });

  const changeCount = (payload: number) => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        count.value += payload;
        resolve();
      }, 1000);
    });
  };

  return { count, doubleCount, changeCount };
});
